<template>
	<view>
		<view class="Ultraman">
			<view class="Ultraman_one">
				<view class="">
					头像
				</view>
				<div class="Ultraman_one_img">
					<uni-file-picker limit="1" @select='eventChooseFile' :disable-preview='true' :del-icon='false'
						v-model="fileList2?fileList2:fileList1">
					</uni-file-picker>
				</div>

			</view>
			<view class="" style="display: flex;justify-content: space-between;padding: 10px;">
				<view class="" style="font-size: 15px;">
					昵称
				</view>
				<u-input v-model="mobile" placeholder="请设置昵称" @blur="onInputBlur" input-align='right'
					style="width: 100px;  float: right;" />
			</view>
			<view class="" style="display: flex;justify-content: space-between;padding: 10px;">
				<view class="" style="font-size: 15px;">
					手机号
				</view>
				<u-input v-model="phonenumber" placeholder="请设置手机号" @blur="onInputBlurs" input-align='right'
					style="width: 100px;  float: right;" />
			</view>
			<view class="" style="width: 50%; height: 40px; position: fixed; bottom: 20%; background-color: #4580ff; left: 25%;border-radius: 30px; text-align: center; line-height: 40px; color: #fff;" @click="baoc">
				保存修改
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				phonenumber: '',
				action: 'http://www.example.com/upload',
				imageValue: [],
				fileList1: {
					url: '../../static/img/logo.png'
				},
				fileList2: {
					url: '../../static/img/logo.png'
				}
			}
		},
		onLoad() {
			this.onlod()
		},
		methods: {
			baoc(){
				uni.navigateTo({
					url:'/pages/my/mycopy'
				})
			},
			onlod() {
				this.$ajax('get', 'recovery/user/profile').then((res) => {
					console.log(res)
					this.mobile = res.data.user.nickName
					this.phonenumber = res.data.user.phonenumber
					this.fileList2.url = res.data.user.avatar
				})
			},
			onInputBlur(event) {
				this.$ajax('put', 'recovery/user', {
					nickName: this.mobile,
				}).then((res) => {
					if (res.code == 200) {
						this.$api.msg('修改成功')
						this.onlod()
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			onInputBlurs(event) {
				this.$ajax('put', 'recovery/user', {
					phonenumber: this.phonenumber
				}).then((res) => {
					if (res.code == 200) {
						this.$api.msg('修改成功')
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			eventChooseFile(event) {
				console.log(event);
				const token = uni.getStorageSync('key');
				uni.uploadFile({
					url: 'https://guanli.yingtaihuanbao.tech/prod-api/recovery/user/avatar', //仅为示例，非真实的接口地址
					filePath: event.tempFilePaths[0],
					name: 'avatarfile',
					header: {
						'Authorization': 'Bearer ' + token,
					},
					complete: (uploadFileRes) => {
						if (JSON.parse(uploadFileRes.data).code === 200) {
							this.fileList1.url = JSON.parse(uploadFileRes.data).data.imgUrl
							this.$api.msg('修改成功')
						} else {
							this.$api.msg(JSON.parse(uploadFileRes.data).msg)
						}
					}
				});
			},
		}
	}
</script>

<style scoped leng='scss'>
	page {
		background-color: #f1f1f1;
	}

	/deep/.u-cell__body {
		padding: 20px 15px;
	}

	.Ultraman {
		width: 93%;
		height: 500px;
		border-radius: 20px;
		background-color: #fff;
		margin: 10px auto;
		/* padding: 20px; */

	}

	.Ultraman_one {
		padding: 10px;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .uni-file-picker {
		width: 100px;
		height: 100px;
	}

	::v-deep .file-picker__box-content {
		width: 90px;
		height: 90px;
	}

	.wanhs {
		width: 50px;
		height: 50px;
		border-radius: 10px;
	}
</style>